<template>
  <div class="test">
    <main-nav :index="4"></main-nav>
    <div class="container">
      <div class="question-title">
        <h1>{{form.title}}</h1>
        <div v-if="form.createdBy">
          <i-tag v-for="(tag, index) in form.tags" :key="'question-detail-' + index">{{tag}}</i-tag>
          <span>{{form.createdBy.name}} <date-span :value="form.createdAt"></date-span> 提问</span>
        </div>
      </div>
      <i-row v-if="form.id">
        <i-col :md="18" class="question-body">
          <div class="pull-left recommend-btn">
            <div class="ivu-btn">
              <i-tooltip placement="top">
                <div slot="content">
                  <p>问题对人有帮助，内容很</p>
                  <p>完整，我也想知道答案</p>
                </div>
                <a href="javascript:;" @click="agree"><i-icon type="arrow-up-b" class="display-block"></i-icon></a>
              </i-tooltip>
              {{form.recommended}}
              <i-tooltip>
                <div slot="content">
                  <p>问题没有实际价值，缺少关</p>
                  <p>键内容，没有改进余地</p>
                </div>
                <a href="javascript:;" @click="disagree"><i-icon type="arrow-down-b" class="display-block"></i-icon></a>
              </i-tooltip>
            </div>
          </div>
          <editor-viewer :html="form.description"></editor-viewer>
          <div v-if="form.files && form.files.length">
            <p>附件：</p>
            <p v-for="file in form.files" :key="file.id">
              <a :href="file.path" :download="file.name" target="_blank">{{file.name}}</a>
            </p>
          </div>
          <post-replies ref="replies" :post-id="id" class="margin-top-20"></post-replies>
        </i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
import MainNav from '../components/main-nav'
import QEditor from '../components/editor'
import PostReplies from '../components/post-replies'
import DateSpan from '../components/data-span/Date'
import EditorViewer from '../components/editor/View'
import { mapActions } from 'vuex'

export default {
  components: {
    MainNav,
    QEditor,
    EditorViewer,
    PostReplies,
    DateSpan
  },
  methods: {
    ...mapActions({
      getPost: 'getPost'
    }),
    disagree() {
      this.$refs.replies.handle(this.form, false)
    },
    agree(item) {
      this.$refs.replies.handle(this.form, true)
    }
  },
  data() {
    return {
      id: null,
      form: {
        id: null
      }
    }
  },
  mounted() {
    const that = this
    var id = this.$router.currentRoute.params.id
    this.getPost({
      id: id,
      callback(data) {
        that.form = data
      }
    })
    that.id = id
    document.getElementById('main').style.background = 'white'
  }
}
</script>

<style>
.test {
  background: white !important;
}
</style>

<style scoped lang="less">
.question-title {
  border-bottom: 1px solid #ccc;

  padding: 20px 0 20px 0;
  h1 {
    line-height: 1.2;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
  }
}
.question-body {
  padding: 10px 0;
  .recommend-btn {
    margin-top: 12px;
  }
  .editor {
    margin-left: 45px;
    min-height: 100px;
  }
}

.ivu-tooltip-inner p {
  text-align: center;
}
</style>
